<template>
          <div class="right_function">
                 <div class="m-volume" v-show="volume_show">
                     <div class="barbg"  ref="barbg">
                         <div class="Volume_bar" ref="ad" @click="volume_clickmove">
                             
                             <div class="bg" :style="stylemove" ref="btn"></div>
                               <span class="Volume_bar_btn"  @mousedown.prevent='clickmove' :style='styletop' ref="span"></span>
                           </div>    
                         
                         </div>
                 </div>
              <span :class="volume_enter" @click='volumeShow' ref="volumeOff">
                           
              </span>
             <!-- 播放顺序 -->
             <div class="order">
                <span class="show_order" v-show="order_show" v-text="order_text"></span>
             <span :class="Play_order" @click="changePlay" :title="order_text"></span>
             </div>
              
              <a href="javascript:;" class="songlist" @click="isShow" title="播放列表">
                     <span class="songnumber">{{SongSum}}</span>  
              </a>
        
         </div>
        
</template>

<script>

export default {
     name:'FooterSongList',
     data(){
        return{
            SongSum:'0',
            flag:false,
            stylemove:{
            height:'93px'
            },
            styletop:{
                top:'0pX'
            },
            volume_enter:'volume',
            volume_show:false,
            Play_order:'loop',
            order_show:false,
            order_text:'循环',
            times:''
        }
     },
     methods: {
         isShow(){
            this.$bus.$emit('isShow_FooterPlayList',)
         },
         clickmove(){
           this.$bus.$emit('getMoveEventName','volume_move')
         },
         volumeShow(){
             this.volume_show = !this.volume_show;
            
         },
         changePlay(){
             switch (this.Play_order) {
                 case 'loop':
                     this.Play_order = 'random';
                     this.order_show = true;
                     this.order_text = '随机';
                     this.$bus.$emit('play_order','random')
                     clearTimeout(this.times)
                    this.times = setTimeout( () =>{  
                         this.order_show = false;
                     },2000);
                     break;
                 case 'random':
                     this.Play_order = 'replace_play'
                     this.order_show = true;
                     this.order_text = '单曲循环';
                      this.$bus.$emit('play_order','replace_play')
                    this.$bus.$emit('play_replace',true)
                      clearTimeout(this.times)
                     this.times = setTimeout( () =>{
                         this.order_show = false;
                     },2000);
                  break;
                  case 'replace_play':
                    this.Play_order = 'loop'
                    this.order_show = true;
                    this.order_text = '循环';
                    this.$bus.$emit('play_order','loop')
                    this.$bus.$emit('play_loop',false)
                      clearTimeout(this.times);
                    this.times = setTimeout( () =>{
                         this.order_show = false;
                     },2000);
                    break;   
                 default:
                     break;
             }
         },
         volume_clickmove(el){
             
               // 通过点击更改音量条得高度
                
              this.stylemove.height = 93 - (el.clientY - Math.round(this.$refs.ad.getBoundingClientRect().top)) + 'px';
            // 通过点击更改音量按钮的Top值
             this.styletop.top = Math.round(81 - (93 - (el.clientY - Math.round(this.$refs.ad.getBoundingClientRect().top))) * 0.871) + 'px';
             // 通过音量条的高度转换位百分比来调整音量大小
             this.$bus.$emit('volumeSize',((93 - (el.clientY - Math.round(this.$refs.ad.getBoundingClientRect().top))) / 93).toFixed(2));
   
             
            
            

         }
       
       
       
        
         
     },
     mounted(){
         this.$bus.$on('SongSum', (el) => {
            
                this.SongSum = el
         })
         this.$bus.$on('volume_moveup', (el) =>{
            if (this.$refs.btn.offsetHeight + el <= 93) {
            this.stylemove.height = this.$refs.btn.offsetHeight + el + 'px'; 
         
           
            this.styletop.top = (93 - this.$refs.btn.offsetHeight - el) * 0.871 + 'px'

            // 调整音量
            this.$bus.$emit('volumeSize',((this.$refs.btn.offsetHeight + el) / 93).toFixed(2));
            

               //音量图标
            this.volume_enter = 'volume'
               
               
            }
         }) 
             

        
         this.$bus.$on('volume_movedown', (el) => {
                 if (this.$refs.btn.offsetHeight > 0) {
                this.stylemove.height = this.$refs.btn.offsetHeight - el + 'px';
                this.styletop.top = Math.round((93 - this.$refs.btn.offsetHeight + el) * 0.871) + 'px'  
                

                 
                // 调整音量
                this.$bus.$emit('volumeSize',((this.$refs.btn.offsetHeight - el) / 93).toFixed(2) >=0 ? ((this.$refs.btn.offsetHeight - el) / 93).toFixed(2):0)
             
                
            }else {
                this.volume_enter = 'volume_enter'
            }    
           })  

         // 通过点击footer组件其他得地方，来隐藏音量
       this.$bus.$on('volume_isshow',  (el) =>{
            this.volume_show = el;
           
       })     
    
     },
   
    
}
</script>

<style scoped>
   .songlist {
       position: relative;
       margin: 16px 2px 0 0 ;
       float: left;
       width: 60px;
       height: 27px;
       background: url(../images/playbar.png) no-repeat -42px -68px;
       color: #fff;
      cursor:pointer
       
   }
   .songnumber {
       position: absolute;
       top: 4px;
       right: 18px;
       color: #666;
   }
   .volume {
       float: left;
       margin: 16px 2px 0 0 ;
       width: 25px;
       height: 25px;
       background: url(../images/playbar.png) no-repeat -2px -248px;
       cursor: pointer;
  
   }
   .volume:hover {
          background: url(../images/playbar.png) no-repeat -31px -248px;
   }
   .volume_enter {
        float: left;
       margin: 16px 2px 0 0 ;
       width: 25px;
       height: 25px;
       background: url(../images/playbar.png) no-repeat -104px -69px;
   }
   .volume_enter:hover {
        background: url(../images/playbar.png) no-repeat -126px -69px;
   }
   .right_function {
       position: relative;
       padding: 0 0 0 16px;
       float: left;
       z-index: 9;
   }
   .right_function::before {
        content:'';
        position: absolute;
        top: 16px;
        left: 2px;
         
          width: 6px;
          height: 30px;
          background: url(../images/playbar.png) no-repeat -145px -248px;
   }
   .m-volume {
       position: absolute;
       top: -107px;
       left: 12px;
       width: 32px;
       height: 113px;
       
       background: url(../images/playbar.png) no-repeat 0 -503px;
   }
   .barbg {
       position: absolute;
       
       top: 10px;
       left: 14px;
       width: 4px;
       height: 93px;
       
   }
    .Volume_bar {
        position: absolute;
        padding: 2px 0;
        bottom: 0px;
        height: 93px;
        width: 100%;
        
    }
    .Volume_bar_btn {
        position: absolute;
        left: -7px;
        width: 18px;
        height: 20px;
        background: url(../images/iconall.png) no-repeat -40px -250px;
        z-index: 9;
    }
    .bg {
       position: absolute;
       bottom: 0;
       background: url(../images/playbar.png) no-repeat -40px bottom;
       width: 4px;
      
    }
  
    .replace_play {
        float: left;
        margin: 17px 2px 0 0;
        width: 25px;
        height: 25px;
        background: url(../images/playbar.png) no-repeat -66px -344px;
        cursor: pointer;
    }
    .replace_play:hover {
    background: url(../images/playbar.png) no-repeat -93px -344px;
    }
    .loop {
        float: left;
        margin: 17px 2px 0 0;
        width: 25px;
        height: 25px;
        background: url(../images/playbar.png) no-repeat -3px -344px;
        cursor: pointer;
    }
    .loop:hover {
        float: left;
        margin: 17px 2px 0 0;
        width: 25px;
        height: 25px;
        background: url(../images/playbar.png) no-repeat -33px -344px;
    }
    .random {
        float: left;
        margin: 17px 2px 0 0;
        width: 25px;
        height: 25px;
        background: url(../images/playbar.png) no-repeat -65px -248px;
        cursor: pointer;
    }
    .random:hover {
        background: url(../images/playbar.png) no-repeat -92px -248px;
    }
    .order {
        position: relative;
        float: left;
    }
    .show_order {
        position: absolute;
        top: -29px;
        left: -26px;
        width: 81px;
        height: 39px;
        line-height: 34px;
        text-align: center;
        background: url(../images/playbar.png) no-repeat 0 -457px;
        color: #fff;
        z-index: 99;
    }

</style>